<template>
  <px-dialog v-model="visible" title="保养派发" width="600px" destroy-on-close append-to-body @close="cancel">
    <px-form ref="formRef" :model="formValue" :rules="rules" label-width="120px">
      <px-form-item label="执行公司" prop="company">
        <px-input v-model="formValue.company" maxlength="50" clearable placeholder="请输入执行公司" />
      </px-form-item>
      <px-form-item label="执行联络人" prop="contact">
        <px-input v-model="formValue.contact" maxlength="50" clearable placeholder="请输入执行联络人" />
      </px-form-item>
      <px-form-item label="执行联络人电话" prop="phone">
        <px-input v-model="formValue.phone" maxlength="50" clearable placeholder="请输入执行联络人电话" />
      </px-form-item>
      <px-form-item label="执行联络人邮箱" prop="email">
        <px-input v-model="formValue.email" maxlength="50" clearable placeholder="请输入执行联络人邮箱" />
      </px-form-item>
    </px-form>
    <template #footer>
      <div class="dialog-footer">
        <px-button @click="cancel">取 消</px-button>
        <px-button type="primary" @click="submitForm(formRef)">确 定</px-button>
      </div>
    </template>
  </px-dialog>
</template>
<script lang="ts" setup>
import { allocateOrder } from "@/api/erc/epm";
import { PxMessage } from "px-ui";
import { computed, reactive, ref, toRefs } from "vue";

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["closeDialog", "queryTable"]);
// 父级传过来的值
const props = defineProps(["visible", "code"]);

const visible = computed(() => props.visible);

// 表单校验规则
const rules = computed(() => ({
  company: [{ required: true, message: "执行公司不能为空", trigger: "blur" }],
  contact: [{ required: true, message: "执行联络人不能为空", trigger: "blur" }],
  phone: [{ required: true, message: "执行联络人电话不能为空", trigger: "blur" }],
  email: [{ required: true, message: "执行联络人邮箱不能为空", trigger: "blur" }]
}));

const formRef = ref();

const state = reactive<Record<string, any>>({
  formValue: {}
});
const { formValue } = toRefs(state);

/** 取消按钮 */
const cancel = () => {
  formRef.value.resetFields();
  emits("closeDialog");
};
/** 提交按钮 */
const submitForm = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      await allocateOrder({ code: props.code, ...formValue.value });
      PxMessage.success("工单派发成功");
      cancel();
      emits("queryTable");
    }
  });
};
</script>
